<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div class="layer">
      <!-- <input class="pattern" type="text" ref="input" maxlength="11"> -->
      <el-input :model-value="value" @input="setNumberValue" placeholder="Please input"></el-input>
    </div>
    <div class="">
      <el-button type="primary" @click="triggerDialog">Dialog</el-button>
      <el-button v-if="isBrowser" type="primary" @click="forwardTroisJS">
        TroisJS
      </el-button>
      <el-button v-else type="primary" @click="forwardElectron">
        Electron
      </el-button>
    </div>
    <el-dialog v-model="dialogVisible" title="Tips" width="30%" :before-close="handleClose">
      <span>This is a message</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            Confirm
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { initPlatform } from '@/plugins'
import { createFnValue } from '@/utils'

const fnSetValue = createFnValue()

export default defineComponent({
  name: 'About',
  data () {
    return {
      inputVal: '',
      value: 'About',
      dialogVisible: false
    }
  },
  components: {
  },
  mounted () {
    console.log('-- About Page --')
    initPlatform((electron: ElectronAPI) => {
      electron.updateMenuOpts([])
      console.log(electron.getGlobal('appShared'))
    })
    const inputRef = this.inputRef()
    if (inputRef) {
      inputRef.addEventListener('input', (event) => {
        fnSetValue(event as InputEvent)
      })
    }
  },
  methods: {
    triggerDialog () {
      if (this.isBrowser) {
        this.dialogVisible = true
      } else {
        initPlatform((electron: ElectronAPI) => {
          electron.remote.dialog.showMessageBox({
            type: 'warning',
            title: '关闭',
            message: '是否要关闭窗口',
            buttons: ['取消', '确定']
          }).then((reply) => {
            if (reply.response === 1) {
              electron.ipcRenderer.send('quit')
            }
          })
        })
      }
    },
    handleClose (done: () => void) {
      initPlatform((electron: ElectronAPI) => {
        done()
        console.log(electron.remote)
      })
    },
    forwardTroisJS () {
      this.$router.push('/troisjs')
    },
    forwardElectron () {
      this.$router.push('/electron')
    },
    inputRef () {
      return this.$refs.input as HTMLElement
    },
    setNumberValue (value: string) {
      console.log('value', value)
      if (this.canInput(value)) this.value = value
    },
    canInput (value: string) {
      return value.length === 0 || value.length === this.value.length - 1 || /^\d*$/.test(value)
    },
    inputChangeNum (value: string) {
      if (value === undefined) return
      return value
        .replace(/[^\d.]/g, '')
        .replace(/\.{2,}/g, '.')
        .replace('.', '$#$')
        .replace(/\./g, '')
        .replace('$#$', '.')
        .replace(/^\./g, '')
    }
  }
})
</script>

<style scoped lang="scss">
.layer {
  margin: 20px 0;
}

.pattern {
  width: 180px;
  height: 32px;
}
</style>
